<template>
  <!-- 入库首页 -->
  <BaseHeader title="工兵第72旅机关信息资料室" />
  <div class="centers">
    <el-button class="bt-group" type="primary" @click="checkKucun">库存检查</el-button>
    <el-button class="bt-group" type="primary" @click="rukuCheck">入库检查</el-button>
    <el-button class="bt-group" type="primary" @click="qinglingRecord">请领记录检查</el-button>
    <el-button class="bt-group" type="primary" @click="returnRecord">归还记录检查</el-button>
    <el-button class="bt-group" type="primary" @click="videoCheck">监控记录检查</el-button>
    <el-button class="bt-group" type="primary" @click="checkRecord">检查记录</el-button>
  </div>
  <BaseFooter />
</template>

<script setup lang="ts">
import BaseHeader from '../BaseHeader.vue';
import BaseFooter from '../BaseFooter.vue';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
// import OpenBox from './components/OpenBox.vue';
onMounted(() => {
  console.log('onMounted');
})
const router = useRouter();

const checkKucun = () => {
  router.push({ path: '/kucuncheck' });
}
const rukuCheck = () => {
  router.push({ path: '/ruku' });
}
const qinglingRecord = () => {
  router.push({ path: '/qinglingcheck' });
}
const returnRecord = () => {
  router.push({ path: '/returncheck' });
}
const videoCheck = () => {
  router.push({ path: '/videocheck' });
}
const checkRecord = () => {
  router.push({ path: '/checkrecord' });
}

</script>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.toptitlemain {
  width: 100%;
  height: calc(92vh);
  padding: 1vw;
  box-sizing: border-box;

  .out-input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1vw;

    span {
      display: inline-block;
      color: #fff;
      margin-right: 10px;
    }
  }

  .table-list {
    width: 100%;
    height: 75vh;
    padding-top: 4vh;
    box-sizing: border-box;
    position: relative;

    // TODO table背景渐变色
    .in-pack {
      position: absolute;
      top: -1vh;
      right: 1vh;
    }
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.centers {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 70vh;
  padding: 0 5vw;
  box-sizing: border-box;

  .bt-group {
    width: 15vw;
    height: 20vh;
    font-size: 20px;
  }
}

.back-home {
  position: fixed;
  // right: ;
  right: 5vw;
  bottom: 6vh;
}
</style>
